<script>

import * as echarts from 'echarts';
import $ from 'jquery'
// import $ from 'jquery'
export default {
  name: 'VisualizationTwo',
  data() {
    return{

    }
  },
  mounted() {
    this.getData("china");
  },
  methods: {
    getData(dqName) {
      this.$axios.get('/api/vis/data1', {}).then(res => {
        if (res.data.code === 20041) {
          let data = [];
          for (let i = 0; i < res.data.data.length; i++) {
            if("正常订单" !== res.data.data[i].param1) {
              if("天津" === res.data.data[i].param1) {
                data.push(
                    {name: "天津市", value: res.data.data[i].param2},
                )
              }else if("重庆" === res.data.data[i].param1) {
                data.push(
                    {name: "重庆市", value: res.data.data[i].param2},
                )
              }else if("上海市" === res.data.data[i].param1) {
                data.push(
                    {name: "上海市", value: res.data.data[i].param2},
                )
              }else if("上海" === res.data.data[i].param1) {
                data["上海市"] += res.data.data[i].param2
              }else if("北京市" === res.data.data[i].param1) {
                data.push(
                    {name: "北京市", value: res.data.data[i].param2},
                )
              }else if("北京" === res.data.data[i].param1) {
                data["北京市"] += res.data.data[i].param2
              }else {
                data.push(
                    {name: res.data.data[i].param1, value: res.data.data[i].param2},
                )
              }
            }
          }
          this.initMap(dqName, data)
        }
      }).catch(error => {
        this.open4(error);
      })
    },
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '这是一条错误的提示消息'
      });
    },
    initMap(dqName, data) {
      var chartDom = document.getElementById('main2');
      var myChart = echarts.init(chartDom);
      var option;
      myChart.showLoading(dqName);
      $.get('/json/' + dqName + '.json', function (geoJson) {
        myChart.hideLoading();
        let sizeMap = 100;
        echarts.registerMap('Beijing', geoJson);
        myChart.setOption(
            (option = {
              layoutCenter: ['45%', '66%'],//位置
              layoutSize: sizeMap + '%',//大小
              title: {
                text: '全国各省企业盈利展示',
              },
              tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (元)'
              },
              visualMap: {
                show: false,
                min: 800,
                max: 50000,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                  color: ['lightskyblue', 'yellow', 'orangered']
                }
              },
              series: [
                {
                  // name: '各地区地震次数',
                  type: 'map',
                  map: 'Beijing',
                  gooIndex: 0,
                  // aspectScale: 1,
                  zoom: 1.3,
                  itemStyle: {
                    go: {
                      regions:[
                        {
                          name: '南海诸岛',
                          value: 0,
                          itemStyle:{
                            normal: {
                              opacity: 0,
                              label: {
                                show: false
                              }
                            }
                          }
                        }
                      ],
                    }
                  },
                  label: {
                    show: true
                  },
                  data: data
                }
              ],
            })
        );
      });

      option && myChart.setOption(option);
    },
  }

}
</script>

<template>
  <div id="main2"></div>
</template>

<style scoped>
#main2 {
  width: 100%;
  height: 100%;
}
</style>